// 样式-数据-拖拉拽数据
import React, { useCallback, useEffect, useState } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import { AGGREGATE_TYPES, SORT_TYPES, DL_TYPE, QUOTA_DATE_AGGREGATE_TYPES, DATE_TYPES } from './EnumConfig';
import DragProvider from './Drag/DragProvider';
// import DragTree from './Drag/DragTree';
import DataTree from './Drag/Tree/DataTree';

import DefaultValue from './DefaultValue';
import FilterCharts from './FilterCharts';
import ChooseTableType from './ChooseTableType';
import OpenTotal from './OpenTotal';
import ValueFields from './ValueFields';
import OpenAggregation from './OpenAggregation';
import PieType from './PieType';
import PieDimension from './PieDimension';
import PieMeasure from './PieMeasure';
import LiquidChartType from './LiquidChartType';
import QuotaData from './QuotaData';
import GaugeData from './GaugeData';
import LineDataType from './LineDataType';
import ChooseColumnType from './ChooseColumnType';
import DoubleYLineData from './DoubleYLineData';
import AreaDataType from './AreaDataType';
import WordCloudDataType from './WordCloudDataType';
import ScatterDataType from './ScatterDataType';
import RadarDataInfo from './RadarDataInfo';
import FilterField from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/FilterField';
import MapData from './map/MapData';
import BulletDataType from './BulletDataType';
import FilterDataSet from './FilterDataSet';
import { getAllTable } from 'src/services/AnalyseManage';

interface IProps {
	currentType: string;
	TYPECONFIG: any;
	config: any;
	form: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	allConfigs: any;
	pageId: string;
}

const containerStyle = {
	width: '100%',
	// display: 'flex',
	height: 'calc(100vh - 246px)',
};

const leftStyle = {
	// flex: '1',
	width: '45%',
	height: '100%',
	display: 'inline-block',
	verticalAlign: 'top',
	borderRight: '1px solid #ccc',
};

const rightStyle = {
	// flex: '1',
	width: '54%',
	height: '100%',
	verticalAlign: 'top',
	display: 'inline-block',
	paddingLeft: '10px',
	// paddingBottom: '50px'
};

const DataMain = ( props: IProps ) => {
	const { TYPECONFIG, currentType, onValuesChange, config, form, allConfigs, pageId } = props;
	let [ currentDragNode, setCurrentDragNode ] = useState( null );
	const [ dataTables, setDataTables ] = useState( [] );


	const setCurrentReault = ( node: any ) => {
		if ( node ) {
			const isDL = node.modelType === DL_TYPE;
			const isQuota = config.type === 'Quota';

			let isDate = false;
			// 自定义层级
			if ( node.childrenType === 'FOLDER' ) {
				isDate = false;
			} else {
				isDate = DATE_TYPES.indexOf( node.dataType.toUpperCase() ) !== -1;
			}

			const nodeValue = {
				title: node.title,
				dataIndex: node.name,
				name: node.name,
				key: node.key,
				id: node.id,
				modelType: node.modelType,
				frontendId: node.frontendId,
				alias: node.aliasName,
				dataType: node.dataType,
				type: node.type,
				orderType: isDate ? SORT_TYPES.ASC.value : SORT_TYPES.NONE.value,
				aggregateType: isDL ? AGGREGATE_TYPES.SUM.value : '',
				formatType: isDate ? ( isQuota ? QUOTA_DATE_AGGREGATE_TYPES.YEAR.value : QUOTA_DATE_AGGREGATE_TYPES.YEAR_MONTH_DAY.value ) : '',
				precision: '',
				dataUnit: '',
				childrenType: node.childrenType,
				folderId: node.folderId,
				children: node.children,
			};
			setCurrentDragNode( nodeValue );
		} else {
			setCurrentDragNode( null );
		}
	};

	const valueFieldsType =
		TYPECONFIG[currentType].indexOf( 'valueFieldsMeasure' ) !== -1
			? 'valueFieldsMeasure'
			: TYPECONFIG[currentType].indexOf( 'valueFieldsDimension' ) !== -1
				? 'valueFieldsDimension'
				: TYPECONFIG[currentType].indexOf( 'valueFieldsDate' ) !== -1
					? 'valueFieldsDate'
					: '';

	const defaultValueType =
		TYPECONFIG[currentType].indexOf( 'defaultValueSingle' ) !== -1
			? 'defaultValueSingle'
			: TYPECONFIG[currentType].indexOf( 'defaultValueDatarange' ) !== -1
				? 'defaultValueDatarange'
				: TYPECONFIG[currentType].indexOf( 'defaultValueDate' ) !== -1
					? 'defaultValueDate'
					: TYPECONFIG[currentType].indexOf( 'defaultValueDaterange' ) !== -1
						? 'defaultValueDaterange'
						: TYPECONFIG[currentType].indexOf( 'defaultValueMul' ) !== -1
							? 'defaultValueMul'
							: '';
	const updateTableName = ( values: any ) => {
		onValuesChange( config.type, config.key, values, 'data' );
	};

	//	获取数据表
	const getAllTables = useCallback( async () => {
		let pageResponse = await getAllTable( { roleSign: '' } );
		if ( pageResponse.data && pageResponse.data.success ) {
			let tables = pageResponse.data.data;
			tables.forEach( v => {
				v.selectable = false; //父级不可选
				v.icon = ( <span className="iconfont bdhwenjianjiaguanbi" style={{ color: '#999' }}></span> );
			} );
			setDataTables( tables );
		}
	}, [ setDataTables ] );

	useEffect( () => {
		if( dataTables.length === 0 ) getAllTables();
	},  [ dataTables, getAllTables ] );

	return (
		<div style={containerStyle}>
			<DragProvider>
				<div style={leftStyle}>
					<Scrollbars style={{ height: '100%' }}>
						<div style={{ paddingBottom: 20, paddingRight: 20 }}>
							{defaultValueType && (
								<DefaultValue config={config} form={form} type={defaultValueType} onValuesChange={onValuesChange}></DefaultValue>
							)}

							{TYPECONFIG[currentType].indexOf( 'chooseTableType' ) !== -1 && (
								<ChooseTableType
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></ChooseTableType>
							)}
							{TYPECONFIG[currentType].indexOf( 'openAggregation' ) !== -1 && (
								<OpenAggregation config={config} form={form} onValuesChange={onValuesChange}></OpenAggregation>
							)}
							{TYPECONFIG[currentType].indexOf( 'openTotal' ) !== -1 && (
								<OpenTotal config={config} form={form} onValuesChange={onValuesChange}></OpenTotal>
							)}
							{TYPECONFIG[currentType].indexOf( 'liquidChartType' ) !== -1 && (
								<LiquidChartType config={config} form={form} onValuesChange={onValuesChange}></LiquidChartType>
							)}
							{TYPECONFIG[currentType].indexOf( 'quotaData' ) !== -1 && (
								<QuotaData
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></QuotaData>
							)}
							{valueFieldsType && (
								<ValueFields
									config={config}
									form={form}
									type={valueFieldsType}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></ValueFields>
							)}
							{TYPECONFIG[currentType].indexOf( 'filterCharts' ) !== -1 && (
								<FilterCharts config={config} form={form} allConfigs={allConfigs} onValuesChange={onValuesChange}></FilterCharts>
							)}

							{TYPECONFIG[currentType].indexOf( 'pieType' ) !== -1 && (
								<PieType config={config} form={form} onValuesChange={onValuesChange} key={new Date().getTime()}></PieType>
							)}

							{TYPECONFIG[currentType].indexOf( 'pieDimension' ) !== -1 && (
								<PieDimension
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></PieDimension>
							)}

							{TYPECONFIG[currentType].indexOf( 'pieMeasure' ) !== -1 && (
								<PieMeasure
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></PieMeasure>
							)}

							{TYPECONFIG[currentType].indexOf( 'gaugeData' ) !== -1 && (
								<GaugeData
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></GaugeData>
							)}
							{TYPECONFIG[currentType].indexOf( 'LineDataType' ) !== -1 && (
								<LineDataType
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></LineDataType>
							)}

							{TYPECONFIG[currentType].indexOf( 'ChooseColumnType' ) !== -1 && (
								<ChooseColumnType
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></ChooseColumnType>
							)}
							{TYPECONFIG[currentType].indexOf( 'DoubleYLineData' ) !== -1 && (
								<DoubleYLineData
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></DoubleYLineData>
							)}

							{TYPECONFIG[currentType].indexOf( 'AreaDataType' ) !== -1 && (
								<AreaDataType
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></AreaDataType>
							)}
							{TYPECONFIG[currentType].indexOf( 'WordCloudDataType' ) !== -1 && (
								<WordCloudDataType
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></WordCloudDataType>
							)}
							{TYPECONFIG[currentType].indexOf( 'ScatterDataType' ) !== -1 && (
								<ScatterDataType
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></ScatterDataType>
							)}

							{TYPECONFIG[currentType].indexOf( 'radarDataInfo' ) !== -1 && (
								<RadarDataInfo
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></RadarDataInfo>
							)}
							{TYPECONFIG[currentType].indexOf( 'mapData' ) !== -1 && (
								<MapData
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></MapData>
							)}

							{TYPECONFIG[currentType].indexOf( 'BulletDataType' ) !== -1 && (
								<BulletDataType
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></BulletDataType>
							)}

							<FilterDataSet dataTables={dataTables}></FilterDataSet>

							{TYPECONFIG[currentType].indexOf( 'filterField' ) !== -1 && (
								<FilterField
									config={config}
									form={form}
									currentDragNode={currentDragNode}
									dragOver={setCurrentReault}
									onValuesChange={onValuesChange}
								></FilterField>
							)}
						</div>
					</Scrollbars>
				</div>
				{currentType && (
					<div style={rightStyle}>
						{/* <DragTree
							config={config}
							pageId={pageId}
							currentType={currentType}
							onValueChange={updateTableName}
							setCurrentReault={setCurrentReault}
						></DragTree> */}
						<DataTree
							dataTables={dataTables}
							config={config}
							pageId={pageId}
							currentType={currentType}
							onValueChange={updateTableName}
							setCurrentResult={setCurrentReault}
						></DataTree>
					</div>
				)}
			</DragProvider>
		</div>
	);
};

export default React.memo( DataMain );
